<!-- 订单管理页面 -->
<template>
    <div class="order-management">
        <h1>订单管理</h1>

        <!-- 搜索区域 -->
        <el-card class="search-card">
            <el-form :model="searchForm" label-width="100px" inline>
                <el-form-item label="订单号">
                    <el-input v-model="searchForm.orderNo" placeholder="请输入订单号"></el-input>
                </el-form-item>
                <el-form-item label="客户名称">
                    <el-input v-model="searchForm.customerName" placeholder="请输入客户名称"></el-input>
                </el-form-item>
                <el-form-item label="订单状态">
                    <el-select v-model="searchForm.orderStatus" placeholder="请选择订单状态">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="待处理" value="pending"></el-option>
                        <el-option label="已完成" value="completed"></el-option>
                        <el-option label="已取消" value="cancelled"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                    <el-button @click="resetSearch">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 订单列表 -->
        <el-card class="list-card">
            <template #header>
                <div class="card-header">
                    <span>订单列表</span>
                    <el-button type="primary" @click="handleBatchUpdate">批量更新</el-button>
                </div>
            </template>

            <el-table :data="orderList" style="width: 100%" @selection-change="handleSelectionChange"
                v-loading="loading">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="orderNo" label="订单号" width="180"></el-table-column>
                <el-table-column prop="customerName" label="客户名称" width="150"></el-table-column>
                <el-table-column prop="orderAmount" label="订单金额" width="120">
                    <template #default="scope">
                        ¥{{ scope.row.orderAmount }}
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
                <el-table-column prop="orderStatus" label="订单状态" width="120">
                    <template #default="scope">
                        <el-tag :type="getStatusType(scope.row.orderStatus)">
                            {{ scope.row.orderStatus }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                        <el-button size="small" @click="handleUpdate(scope.row)"
                            :type="scope.row.orderStatus === 'completed' ? 'info' : 'primary'"
                            :disabled="scope.row.orderStatus === 'completed'">
                            {{ scope.row.orderStatus === 'completed' ? '已完成' : '更新' }}
                        </el-button>
                        <el-button size="small" @click="viewDetail(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination class="pagination" background layout="total, prev, pager, next" :total="total"
                @current-change="handleCurrentChange">
            </el-pagination>

        </el-card>
    </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
    data() {
        return {
            searchForm: {
                orderNo: '',
                customerName: '',
                orderStatus: ''
            },
            orderList: [],
            loading: false,
            total: 0,
            selectedRows: []
        };
    },
    methods: {
        fetchData() {
            // 实现获取订单列表数据的逻辑
        },
        fetchTotal() {
            // 实现获取订单列表总数的逻辑
        },


        handleSearch() {
            // 实现搜索功能的逻辑
        },
        // 时间戳格式化
        formatDate(date) {
            const year = date.getFullYear();
            const month = date.getMonth() + 1;
            const day = date.getDate();
            const hour = date.getHours();
            const minute = date.getMinutes();
            const second = date.getSeconds();
            return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day} ${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`;
        },  // 
        handleDelete(row) {
            // 实现删除功能的逻辑
        },
        handleBatchDelete() {},
        const createUser = () => {
            currentUser.value = {
                id: null,
                name: '',
                email: '',
                role: 'user',
                status: 'active',
                createTime: ''
            }
            dialogTitle.value = '新增用户'
            isEdit.value = true
            dialogVisible.value = true
        }
        
        // resetSearch2() {
        //     this.searchForm = {
        //         orderNo: '',
        //         customerName: '',
        //         orderStatus: ''
        //     };
        //     // 重置搜索条件并刷新列表
        // },
        handleBatchUpdate() {
            // 实现批量更新功能的逻辑
        },
        handleUpdate(order) {
            // 实现单个订单更新功能的逻辑
        },
        viewDetail(order) {
            // 实现查看详情功能的逻辑
        },
        handleSelectionChange(val) {
            this.selectedRows = val;
        },
        handleCurrentChange(page) {
            // 实现分页功能的逻辑
            this.fetchData(page);

        },
        getStatusType(status) {
            switch (status) {
                case 'pending':
                    return 'warning';
                case 'completed':
                    return 'success';
                case 'cancelled':
                    return 'danger';
                default:
                    return '';
            }
        }
    }
};
</script>

<style scoped>
.order-management .search-card,
.order-management .list-card {
    margin-bottom: 20px;
}

.pagination {
    margin-top: 20px;
    text-align: right;
}
</style>
